<template>
  <div class="container">
    <div class="center">
      <h3>为您找到<span>XXX</span>相关服务</h3>
      <div class="second-part">       
        <div class="left">
          <div class="tjpx">
            <span class="tjpx-left">推荐排序</span>
            <ul>
              <li>销量高</li>
              <li>好评多</li>
              <li>上门快</li>
              <li>价格低</li>
            </ul>
            <div class="page">
              <span>1</span>/<span>1</span>
              <span>上一页</span>
              <span>下一页</span>
            </div>
          </div>
          <!-- 引入服务列表组件 -->
          <fwlblist v-for="item in serveList" :key="item.sdid" :serveInfo='item'></fwlblist>
        </div>
        
        <div class="right">
          <h3>服务商</h3>
          <FuWuShang v-for="item in fwsList" :key="item.meid" :fwsInfo="item"></FuWuShang>
        </div>
      </div> 
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive,ref} from 'vue'
import FuWuShang from '@/components/FuWuShang.vue';
import Fwlblist from '@/components/Fwlblist.vue';
import httpApi from '@/http';
import { useRoute } from 'vue-router';
import sdList from '@/types/fwList'
import FwsList from '@/types/fws'
import Redetalis from '@/types/serveDetailType'

let route = useRoute()
let key = route.query.keyword
console.log(key);
//通过关键词搜索服务详情
const serveList = ref<Redetalis[]>([])
httpApi.serveApi.queryServeByKeyword({key}).then(res=>{
  console.log(res);
  serveList.value = res.data.data
})

//获取服务商
const fwsList = reactive<FwsList[]>([])
httpApi.fwsApi.queryFws().then(res=>{
  //console.log(res);
  fwsList.push(...res.data.data.splice(3,5))
})

</script>

<style scoped lang="scss">
.container{
  background-color: #F8F8F8;
  .center{
    h3{
        line-height: 60px;
      }
    .second-part{
      display: flex;
      justify-content: space-between;
      
      .left{
        width: 80%;
        background-color: #fff;
       
        .tjpx{
          position: relative;
          display: flex;
          padding: 0 0 0 20px;
           border: 1px solid #EAEAEA;
          border-bottom: none;
          .tjpx-left{
            display: inline-block;
              padding: 20px 0 16px 0;
              cursor: pointer;
              color: #FF3B45;
              border-bottom: 4px solid #FF3B45;
          }  
          ul{
            display: flex;
            padding: 20px;
            li{
              padding: 0 30px;
              cursor: pointer;
              background-image: url(../../assets/icon/fuwu_down2.jpg);
              background-repeat: no-repeat;
              background-position: 83px 8px;
            }
          }
          .page{
            position: absolute;
            right: 10px;
            padding: 15px 0;
            span{
              font-size: 14px;
              display: inline-block;
              &:nth-child(1){
                color: #FF3B45;
              }
              &:nth-child(3){
                margin: 0 22px 0 10px;
                padding: 5px 15px;
                border: 1px solid #E5E5E5;
              }
              &:nth-child(4){
                padding: 5px 15px;
                border: 1px solid #E5E5E5;
              }
            }
          }
        }
      }
      .right{
        width: 19%;
        background-color: #fff;
        border: 1px solid #EAEAEA;
        h3{
          padding: 20px 10px;
          border-bottom: 1px solid #E5E5E5;
        }
      }
    }
  }
}

</style>